<template>
	<view class="flex item-center" style="background-color:#FFF;">
		<view class="flex justify-around flex-shrink" style="height:52px;">
			<view class="flex-col center" style="width:75px;" @click.stop="onClickHome">
				<image class="size-24 mb-2" src="@/static/svg/activity/icon-home.svg"></image>
				<text class="text-color-hint text-center fs-12 font-normal">首页</text>
			</view>
			<view v-if="isSignUp" class="flex-col center" style="width:75px;" @click="onClickService">
				<image class="size-24 mb-2" src="@/static/svg/activity/icon-service.svg"></image>
				<text class="text-color-hint text-center fs-12 font-normal">客服</text>
			</view>
		</view>
		<!--
		<view v-if="data.activeState===2" class="flex-1 flex center bg-secondary-success text-white fs-16 font-normal" style="height:52px;">
			<text>提醒我</text>
		</view>
		-->
		<view v-if="data.activeState === 2" class="flex-1 flex center text-white fs-16 font-normal"
			style="height:52px;background:#d5d5d5;">
			<text>未开始</text>
		</view>
		<view v-else-if="data.activeState === 3 && !isGroupBuy"
			class="flex-1 flex-col center py-4 bg-primary text-white text-center fs-16 font-normal leading-22"
			style="height:52px;" @click="onClickSubmit(isSignUp ? 'signup' : 'buy')">
			<text v-if="isSignUp" class="h-22 leading-22">立即报名</text>
			<text v-else class="h-22 leading-22">立即购买</text>
			<text class="fs-21 font-semibold h-22 leading-22"><text class="fs-14 font-normal">¥</text>{{
				numberFormat(data.activePrice) }}</text>
		</view>
		<template v-else-if="data.activeState === 3 && isGroupBuy">
			<view v-if="isSignUp"
				class="flex-1 flex-col center py-4 bg-primary text-white text-center fs-16 font-normal leading-22"
				style="height:52px;" @click="onClickSubmit('signup')">
				<text class="h-22 leading-22">立即报名</text>
			</view>

			<view v-else class="flex">
				<!-- <view
					class="flex-1 flex-col center py-4 bg-secondary-warning text-white text-center fs-16 font-normal leading-22"
					style="height:52px;" @click="onClickSubmit('buy')">
					<text class="fs-21 font-semibold h-22 leading-22">
						<text class="fs-14 font-normal">¥</text>
						{{ numberFormat(data.activePrice) }}
					</text>
					<text class="h-22 leading-22">直接购买</text>
				</view> -->
				<view class="flex-col center" style="width:75px;" @click="onClickSubmit('buy')">
					<image class="size-24 mb-2" src="@/static/svg/activity/icon-home.svg"></image>
					<text class="text-color-hint text-center fs-12 font-normal">直接买</text>
				</view>

				<view class="flex-1 flex-col center py-4 bg-primary text-white text-center fs-16 font-normal leading-22"
					style="height:52px;width: 112px;position: relative;" @click="onClickSubmit('groupBuy')">
					<view v-if="data.activeGroupBuy.freeType !== 0" class="fs-12 text-white text-center w-full radius-8 radius-bl-0-i radius-br-0-i absolute z-1"
						style="background-color: #FF7978; top: -22px;">
						{{ data.activeGroupBuy.freeType === 1 ? '团长免单' : '拼团抽免单' }}
					</view>
					<template v-if="props.data.leadFreeEnabled">
						<text class="h-22 leading-22">0元开团</text>
					</template>
					<template v-else>
						<text class="h-22 leading-22">发起拼团</text>
						<text class="fs-21 font-semibold h-22 leading-22">
							<text class="fs-14 font-normal">¥</text>
							{{ numberFormat(data.activeGroupBuy.groupBuyPrice) }}
						</text>
					</template>
				</view>
			</view>
		</template>
		<view v-else-if="data.activeState === 4"
			class="flex-1 flex-col center bg-primary text-white text-center fs-16 font-normal leading-22"
			style="height:52px;">
			<text>已结束</text>
		</view>
		<view v-if="data && data.activeState !== 4"
			class="flex-1 flex-col center py-4 text-white text-center fs-16 font-normal leading-22"
			style="height:52px;background: #D5AB72;" @click="onClickShare">
			<text v-if="data.agentState === 2 && data.activeShareReward" class="h-22 leading-22">帮卖赚</text>
			<text v-else class="h-22 leading-22">分享</text>
			<text v-if="data.agentState === 2 && data.activeShareReward && data.rewardType === 1" class="fs-21 font-semibold h-22 leading-22"><text class="fs-14 font-normal">¥</text>{{ data.activeShareReward.commissionAmt }}</text>
			<text v-if="data.agentState === 2 && data.activeShareReward && data.rewardType === 3" class="fs-21 font-semibold h-22 leading-22">{{ data.activeShareReward.rewardPoints }}<text class="fs-14 font-normal">积分</text></text>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="pop-box">
				<view class="flex item-center flex-col p-20">
					<view>您还未成为TA的经纪人，申请后才能享受经纪人收益</view>
				</view>
				<view class="btn-box flex item-center">
					<view class="btn-sty" @click="toShare">直接分享</view>
					<view class="btn-sty submit-btn" @click="toApply">去申请</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup name="ActivityFooter">
import { ref, computed } from 'vue'
import { floorNumber, numberFormat } from '@/utils/index.js'

const props = defineProps({
	data: {
		type: Object
	},
	type:{ // 活动类型，如果这个有传值，优先根据这个判断，没有的话再根据其它字段，比如data.promotionType来判断
		type:String,
		default:''
	}
})

const emits = defineEmits(['onActionClick'])

const status = ref(1) // 0: 未开始	1: 已开始
const popup = ref()
const showPop = (value) => {
	if (value) {
		popup.value && popup.value.open('center')
	} else {
		popup.value && popup.value.close()
	}
}

/**
 * 是否报名活动
 * 活动类型(1-团购活动，2-报名活动，3-外部活动)
 */
const isSignUp = computed(() => {
	// return props.data && props.data.activeType == 2
	// 拼团没有报名活动 
	return false;
})

const isGroupBuy = computed(() => {
	if(props.type) return props.type==='groupBuy';
	return props.data && props.data.promotionType === 'GROUP_BUY';
});

const toShare = () => {
	emits('onActionClick', 'share')
	showPop(false)
}

const toApply = () => {
	let activeShareReward = props.data.activeShareReward
	let name = activeShareReward.level1Agent ? activeShareReward.level1Agent.agentNickName : activeShareReward.businessInfo.businessShortName
	let avatar = activeShareReward.level1Agent ? activeShareReward.level1Agent.agentAvatar : activeShareReward.businessInfo.businessAvatar
	if(activeShareReward.agentApplyPageType == 1){
		uni.navigateTo({
			url: `/pagesH/agentApply?id=${props.data.businessId}&name=${name}&avatar=${avatar}`
		})
	}else{
		uni.navigateTo({
			url: `/pagesH/agentApply?code=${activeShareReward.level1Agent.inviteCode}&name=${name}&avatar=${avatar}`
		})
	}
	showPop(false)
}

const onClickHome = () => {
	emits('onActionClick', 'home')
}

const onClickService = () => {
	emits('onActionClick', 'service')
}

const onClickShare = () => {
	let activeShareReward = props.data.activeShareReward
	if(activeShareReward){
		if(activeShareReward.agentApplyPageType == 0){
			emits('onActionClick', 'share')
		}else{
			showPop(true)
		}
		return
	}
	emits('onActionClick', 'share')
}

const onClickSubmit = (type) => {
	if (type==='groupBuy' && props.data.activeGroupBuy && !props.data.activeGroupBuy.hasCreateGroupPermission) {
		showToast(`仅商家经纪人可开团`)
		return;
	}
	emits('onActionClick', type)
}

const showToast = (title) => {
	uni.showToast({
		title,
		icon: 'none'
	})
}
</script>
<style lang="scss" scoped>
	.pop-box{
		width: 300px;
		// height: 188px;
		border-radius: 12px;
		background-color: #ffffff;
		box-shadow: 0px -0.5px 0px 0px rgba(0, 0, 0, 0.1);
		.btn-box{
			border-top: 1px solid rgba(51, 51, 51, 0.3);
			margin-top: 10px;
			.btn-sty{
				width: 50%;
				box-sizing: border-box;
				color: rgba(51, 51, 51, 0.6);
				font-family: PingFang SC;
				font-size: 16px;
				font-weight: 400;
				line-height: 44px;
				text-align: center;
				&.submit-btn{
					border-left: 1px solid rgba(51, 51, 51, 0.3);
					color: rgba(250, 69, 67, 1);
				}
			}
		}
	}
</style>